/**
 *  学习目标：组件更新机制
 *    注意：父组件重新渲染时，也会重新渲染子组件。
 *    代码：父组件的 render 运行，子组件的 render 也会被运行。
 *    官网原话：大部分情况下，你应该遵循默认行为。
 */
import React from 'react'

export default class App extends React.Component {
  state = {
    number: 0,
  }
  render() {
    return (
      <>
        <h1>知识点标题</h1>
        <button onClick={() => this.setState({ number: Math.random() })}>点击改变number</button>
        <h2>number:{this.state.number}</h2>
        {/* 组件更新机制：父组件重新渲染时，也会重新渲染子组件。*/}
        <Footer />
      </>
    )
  }
}

class Footer extends React.Component {
  render() {
    console.log('子组件Footer的render被运行了')
    return (
      <div>
        <h3>小米网站底部-不用变的静态结构</h3>
      </div>
    )
  }
}
